<template>
	<el-form class="form"  :model="form" ref="formRef" :rules="rules" label-width="120px"  size="small">
		<div class="form_box">
			<el-row>
        <el-col :span="12">
          <el-form-item label="上级菜单：" :label-width="formLabelWidth" >
            <el-cascader v-model="parentIdArr" :props="menuProps" expand-trigger="hover" style="width:90%"
                         :options="menuTreeList" ref="parentMenuRef"
                         change-on-select ></el-cascader>
          </el-form-item>
        </el-col>

				<el-col :span="12">
					<el-form-item label="标题:" prop="title">
						<el-input v-model="form.title" placeholder="请填写标题" ></el-input>
					</el-form-item>
				</el-col>
        <el-col :span="12">
          <el-form-item label="名称:" prop="name">
            <el-input v-model="form.name" placeholder="请填写名称" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="vue文件路径:" prop="component">
            <el-input v-model="form.component" placeholder="请填写vue文件路径" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序:" prop="sortOrder">
            <el-input type="number" v-model="form.sortOrder" placeholder="" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单类型:" prop="type">
            <el-select v-model="form.type" filterable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="隐藏:" prop="hidden">
            <el-select v-model="form.hidden" filterable>
              <el-option v-for="item in yesOrNotList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="缓存标记:" prop="cacheFlag">
            <el-select v-model="form.cacheFlag" filterable>
              <el-option v-for="item in yesOrNotList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

				<el-col :span="12">
					<el-form-item label="图标SVG:" prop="icon">
						<el-input v-model="form.icon" placeholder="请填写图标SVG" ></el-input>
					</el-form-item>
				</el-col>


				<el-col :span="12">
					<el-form-item label="redirect:" prop="redirect">
						<el-input v-model="form.redirect" placeholder="请填写redirect" ></el-input>
					</el-form-item>
				</el-col>





			</el-row>
		</div>
	</el-form>
</template>
<script>
import global_ from "@/utils/GlobalDict";

import {getCascaderValue} from "@/utils/datahelper.js";

import { modifySysMenu,addSysMenu } from "@/api/system/sysMenu";
export default {
	props: {
		dataObj: {
			type: Object,
			default: new Object()
		},
    extendObj:{
      type: Object,
      default: new Object()
    },
	},
	filters: {
	},
	data(){
		return {
      formLabelWidth:'130px',
			form:{
        cacheFlag:null,
        type:null,
        hidden:null,
      },
      yesOrNotList:global_.elSelectConverter(global_.yesOrNot),
			typeList:[{label:'模块',value:1}, {label:'功能',value:2},{label:'按钮',value:3}],
			rules:{
				name:[{required: true, message: '请填写名称', trigger: 'blur'},],
				title:[{required: true, message: '请填写标题', trigger: 'blur'},],
				component:[{required: true, message: '请填写vue文件路径', trigger: 'blur'},],
				sortOrder:[{required: true, message: '请填写排序', trigger: 'blur'},],
				type:[{required: true, message: '请填写菜单类型', trigger: 'blur'},],
			},
      menuProps:{
			  children: 'children',
        label: 'title',
        value:'id',
      },
      parentIdArr:[],
      menuTreeList:[],
		}
	},
	methods:{
		save(){
			this.$refs['formRef'].validate((valid) => {
				if(valid) {
					this.doSave();
				}else{
					return null;
				}
			});
		},
		doSave(){
      this.form.parent = null;
      this.form.children = null;
		  if(this.parentIdArr && this.parentIdArr.length>0){
        this.form.parentId = this.parentIdArr[this.parentIdArr.length-1];
      }else{
        this.form.parentId = 0;
      }
      this.form.path = "/"+this.form.name;
			if(this.form.id){
				modifySysMenu(this.form).then(response => {
					this.saveCallBack(response);
				});
			}else{
				addSysMenu(this.form).then(response => {
					this.saveCallBack(response);
				});
			}
		},
		saveCallBack(response){
			if(response.data.success){
				this.$notify({
					title: '提示',
					message: '操作成功',
					type: 'success',
					duration: 2000
				})
				this.closeDialog(1)
			}else{
				this.$notify({
					title: '提示',
					message: '操作失败',
					type: 'danger',
					duration: 2000
				})
			}
		},
		closeDialog(reload){
			this.$emit("closeDialog",reload);
		},
	},
	created(){
	  console.log("this.extendObj",this.extendObj)
	  this.menuTreeList = this.extendObj.menuTreeList;
	  this.parentIdArr = this.extendObj.pIdArr.reverse();
		this.form = this.dataObj;
		if(!this.form.id){
      this.form.hidden = 2;//不隐藏
      this.form.cacheFlag = 1;//缓存
    }
    this.form.createTime = null;
    this.form.modifyTime = null;
	},
}
</script>
